<template>
  <div class="">
    <el-skeleton class="mt-10 _module_explicit-padding-lf-20" :rows="5" animated v-if="loading"/>
    <div v-if="moodNotesList!=null && !loading" v-for="(item, index) in moodNotesList" :key="index"
         style="margin-bottom: 60px" class="_module_explicit-padding-lf-20">
      <h1 class="mb-10 font-s-24">{{ item.recordTime }}
        <span class="font-s-16 color-grey-2" title="小记总数">「{{ item.list.length }}条」</span>
      </h1>
      <div v-for="(items,indexs) in item.list" :key="indexs" :ref="`timeNotesItem${index}_${indexs}`">
        <div class="time-motes-list-item _module_hiding">
            <span class="svg-translateY-8 font-s-14 color-grey-2 mr-4" title="记录时间">
            {{ $utils.parseTime(items.recordTime, '{m}-{d}') }}
            </span>
          <svg t="1742789451197" class="icon svg-translateY-8" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg"
               p-id="12540" width="26" height="26">
            <path
              d="M790.1 423.9c0 76.5-62 138.5-138.5 138.5s-138.5-62-138.5-138.5 62-138.5 138.5-138.5c76.4 0 138.5 62 138.5 138.5z"
              fill="#FBBA22" p-id="12541"></path>
            <path
              d="M842.5 587.4c0-81.9-65.3-148.2-145.9-148.2-23.3 0-45.3 5.7-64.8 15.6-31.2-39.9-79.3-65.5-133.3-65.5-75.4 0-139.3 49.8-161.7 118.8-15.6-7.8-33.1-12.2-51.7-12.2-65.1 0-118 53.7-118 119.9s52.8 119.9 118 119.9h418.5v-0.4c77.3-3.8 138.9-68.5 138.9-147.9z"
              fill="#FFFFFF" p-id="12542"></path>
            <path
              d="M797.6 294.2c4.4 0 8.9-1.7 12.2-5.1l34.7-34.7c6.8-6.8 6.8-17.7 0-24.5-6.8-6.8-17.7-6.8-24.5 0l-34.7 34.7c-6.8 6.8-6.8 17.7 0 24.5 3.4 3.4 7.9 5.1 12.3 5.1zM492.4 289.2c3.4 3.4 7.8 5.1 12.2 5.1 4.4 0 8.9-1.7 12.2-5.1 6.8-6.8 6.8-17.7 0-24.5L482 229.9c-6.8-6.8-17.7-6.8-24.5 0-6.8 6.8-6.8 17.7 0 24.5l34.9 34.8zM651.5 233.4c9.6 0 17.3-7.8 17.3-17.3v-52c0-9.6-7.8-17.3-17.3-17.3-9.6 0-17.3 7.8-17.3 17.3v52c0 9.5 7.8 17.3 17.3 17.3zM911.8 406.6h-52.4c-9.6 0-17.3 7.8-17.3 17.3 0 9.6 7.7 17.3 17.3 17.3h52.4c9.6 0 17.3-7.8 17.3-17.3s-7.7-17.3-17.3-17.3zM802.5 461.6c3.1-12.1 4.9-24.7 4.9-37.7 0-85.9-69.9-155.8-155.9-155.8-67.7 0-125.3 43.5-146.7 104-2.1-0.1-4.2-0.2-6.3-0.2-75 0-141.8 44.9-171.6 113.4-13.5-4.5-27.5-6.8-41.8-6.8-74.6 0-135.3 61.5-135.3 137.2 0 75.6 60.7 137.2 135.3 137.2h418.5c1.5 0 3-0.2 4.4-0.6 85.4-6 151.7-77.8 151.7-164.9 0.1-50.3-22.2-95.4-57.2-125.8z m-151-158.9c66.8 0 121.2 54.4 121.2 121.2 0 5.6-0.4 11.2-1.2 16.6-22.5-11.8-47.9-18.6-74.9-18.6-20.7 0-40.8 3.9-60 11.7-26-28.8-59.6-48.4-96.5-56.9 18.5-43.4 61.3-74 111.4-74zM702.8 718c-0.9 0-1.8 0.2-2.7 0.3h-415c-55.5 0-100.6-46-100.6-102.6 0-56.5 45.1-102.5 100.6-102.5 15.2 0 30 3.5 44 10.4 4.5 2.2 9.8 2.4 14.4 0.4 4.6-1.9 8.2-5.8 9.8-10.6 20.8-63.9 79.2-106.9 145.3-106.9 46.8 0 90.4 21.5 119.7 58.9 5.1 6.5 14.1 8.5 21.4 4.8 18-9.1 37.2-13.7 57-13.7 70.9 0 128.6 58.7 128.6 130.9-0.1 69.9-53.9 127.2-122.5 130.6z"
              fill="#211F1E" p-id="12543"></path>
          </svg>
          <span class="cursor-pointer ml-2 time-notes-item-title" @click="getInfo(items.id)">{{ items.title }}</span>
          <span v-if="items.isContent" title="存在内容，点击看详情">
            <svg t="1753688601498" class="icon-theme-2 svg-translateY-3 icon-size-16" viewBox="0 0 1024 1024"
                 version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="6069"><path
              d="M868.500948 233.784534l-78.4487 0 0-86.97898c0-44.061518-39.659255-79.917144-88.446401-79.917144L212.433762 66.88841l-7.2798 0-49.655933 0c-48.678676 0-88.446401 35.855626-88.446401 79.917144l0 274.954189 0 288.537556c0 44.060495 39.659255 79.917144 88.446401 79.917144l78.341253 0 0-55.57883-78.341253 0c-17.819854 0-32.81436-11.136641-32.81436-24.338315L122.683668 435.342086 122.683668 146.805554c0-13.201673 15.102976-24.339338 32.81436-24.339338l49.655933 0 7.2798 0 489.172085 0c17.817808 0 32.813337 11.137665 32.813337 24.339338l0 86.97898L379.329886 233.784534l-7.2798 0-49.65491 0c-48.677653 0-88.447425 35.856649-88.447425 79.917144l0 274.955212 0 288.536532c0 44.060495 39.660278 79.917144 88.447425 79.917144l546.105772 0c48.678676 0 88.446401-35.856649 88.446401-79.917144L956.94735 602.239234 956.94735 313.701678C956.946326 269.641183 917.287071 233.784534 868.500948 233.784534zM901.316332 588.656891l0 288.536532c0 13.201673-15.103999 24.339338-32.815383 24.339338L322.394153 901.532761c-17.819854 0-32.81436-11.137665-32.81436-24.339338L289.579793 602.239234 289.579793 313.701678c0-13.201673 15.103999-24.339338 32.81436-24.339338l49.65491 0 7.2798 0 489.171062 0c17.819854 0 32.815383 11.137665 32.815383 24.339338L901.315308 588.656891z"
              p-id="6070"></path><path
              d="M372.918873 455.009008l333.682755 0c15.321964 0 27.817556-12.386098 27.817556-27.815509 0-15.32094-12.387122-27.816532-27.817556-27.816532L372.918873 399.376966c-15.32094 0-27.816532 12.495592-27.816532 27.816532C345.103364 442.621886 357.598956 455.009008 372.918873 455.009008z"
              p-id="6071"></path><path
              d="M817.866734 566.273091 372.918873 566.273091c-15.32094 0-27.816532 12.495592-27.816532 27.816532 0 15.429411 12.495592 27.816532 27.816532 27.816532l444.947861 0c15.321964 0 27.817556-12.386098 27.817556-27.816532C845.68429 578.768683 833.296145 566.273091 817.866734 566.273091z"
              p-id="6072"></path><path
              d="M817.866734 733.169215 372.918873 733.169215c-15.32094 0-27.816532 12.495592-27.816532 27.816532 0 15.429411 12.495592 27.816532 27.816532 27.816532l444.947861 0c15.321964 0 27.817556-12.386098 27.817556-27.816532C845.68429 745.664807 833.296145 733.169215 817.866734 733.169215z"
              p-id="6073"></path></svg>

              </span>
        </div>
        <div class="time-motes-list-item _module_explicit">
          <nuxt-link :to="`/time_notes/details/`+$base64.encode(items.id)" target="_blank">
            <div class="cursor-pointer ml-2 line-height-26">
             <span class="font-s-14 color-grey-2 mr-4" title="记录时间">
            {{ $utils.parseTime(items.recordTime, '{m}-{d}') }}
           </span>
              <span class="time-notes-item-title">
              {{ items.title }}
              </span>
              <span v-if="items.isContent" title="存在内容，点击看详情">
            <svg t="1753688601498" class="icon-theme-2 svg-translateY-3 icon-size-16" viewBox="0 0 1024 1024"
                 version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="6069"><path
              d="M868.500948 233.784534l-78.4487 0 0-86.97898c0-44.061518-39.659255-79.917144-88.446401-79.917144L212.433762 66.88841l-7.2798 0-49.655933 0c-48.678676 0-88.446401 35.855626-88.446401 79.917144l0 274.954189 0 288.537556c0 44.060495 39.659255 79.917144 88.446401 79.917144l78.341253 0 0-55.57883-78.341253 0c-17.819854 0-32.81436-11.136641-32.81436-24.338315L122.683668 435.342086 122.683668 146.805554c0-13.201673 15.102976-24.339338 32.81436-24.339338l49.655933 0 7.2798 0 489.172085 0c17.817808 0 32.813337 11.137665 32.813337 24.339338l0 86.97898L379.329886 233.784534l-7.2798 0-49.65491 0c-48.677653 0-88.447425 35.856649-88.447425 79.917144l0 274.955212 0 288.536532c0 44.060495 39.660278 79.917144 88.447425 79.917144l546.105772 0c48.678676 0 88.446401-35.856649 88.446401-79.917144L956.94735 602.239234 956.94735 313.701678C956.946326 269.641183 917.287071 233.784534 868.500948 233.784534zM901.316332 588.656891l0 288.536532c0 13.201673-15.103999 24.339338-32.815383 24.339338L322.394153 901.532761c-17.819854 0-32.81436-11.137665-32.81436-24.339338L289.579793 602.239234 289.579793 313.701678c0-13.201673 15.103999-24.339338 32.81436-24.339338l49.65491 0 7.2798 0 489.171062 0c17.819854 0 32.815383 11.137665 32.815383 24.339338L901.315308 588.656891z"
              p-id="6070"></path><path
              d="M372.918873 455.009008l333.682755 0c15.321964 0 27.817556-12.386098 27.817556-27.815509 0-15.32094-12.387122-27.816532-27.817556-27.816532L372.918873 399.376966c-15.32094 0-27.816532 12.495592-27.816532 27.816532C345.103364 442.621886 357.598956 455.009008 372.918873 455.009008z"
              p-id="6071"></path><path
              d="M817.866734 566.273091 372.918873 566.273091c-15.32094 0-27.816532 12.495592-27.816532 27.816532 0 15.429411 12.495592 27.816532 27.816532 27.816532l444.947861 0c15.321964 0 27.817556-12.386098 27.817556-27.816532C845.68429 578.768683 833.296145 566.273091 817.866734 566.273091z"
              p-id="6072"></path><path
              d="M817.866734 733.169215 372.918873 733.169215c-15.32094 0-27.816532 12.495592-27.816532 27.816532 0 15.429411 12.495592 27.816532 27.816532 27.816532l444.947861 0c15.321964 0 27.817556-12.386098 27.817556-27.816532C845.68429 745.664807 833.296145 733.169215 817.866734 733.169215z"
              p-id="6073"></path></svg>
              </span>
            </div>
          </nuxt-link>
        </div>
      </div>
    </div>
    <div v-if="moodNotesList==null">
      <div style="text-align: center">
        <div>
          <svg t="1667825747332" class="icon" viewBox="0 0 1239 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="1560" width="50" height="50">
            <path
              d="M1215.146667 961.194667c0 35.498667-240.298667 62.805333-540.672 62.805333-297.642667 0-540.672-27.306667-540.672-62.805333 0-35.498667 240.298667-62.805333 540.672-62.805334 297.642667 0 540.672 27.306667 540.672 62.805334"
              fill="#DFDFDF" p-id="1561"></path>
            <path
              d="M95.573333 245.76l-5.461333-5.461333c2.730667-2.730667 8.192-5.461333 13.653333-10.922667l5.461334 5.461333c-5.461333 2.730667-8.192 8.192-13.653334 10.922667z m19.114667-13.653333l-2.730667-8.192c8.192-5.461333 19.114667-10.922667 27.306667-16.384l2.730667 8.192c-8.192 5.461333-19.114667 10.922667-27.306667 16.384z m906.581333 494.250666h-24.576v-8.192h32.768v8.192c-2.730667-2.730667-5.461333 0-8.192 0z m16.384-2.730666v-8.192c10.922667 0 21.845333 0 32.768-2.730667v8.192c-10.922667 2.730667-21.845333 2.730667-32.768 2.730667z m-49.152 0c-10.922667 0-21.845333-2.730667-32.768-5.461334l2.730667-8.192c10.922667 2.730667 19.114667 2.730667 32.768 5.461334l-2.730667 8.192z m-40.96-8.192c-10.922667-2.730667-21.845333-5.461333-30.037333-10.922667l2.730667-8.192c8.192 5.461333 19.114667 8.192 30.037333 10.922667l-2.730667 8.192z m-38.229333-13.653334c-10.922667-5.461333-19.114667-13.653333-27.306667-21.845333l5.461334-5.461333c5.461333 8.192 13.653333 13.653333 24.576 19.114666l-2.730667 8.192z m-30.037333-30.037333c-5.461333-8.192-10.922667-19.114667-13.653334-30.037333l8.192-2.730667c2.730667 10.922667 5.461333 19.114667 13.653334 27.306667l-8.192 5.461333z m-16.384-38.229333c0-5.461333-2.730667-13.653333-2.730667-21.845334v-13.653333h8.192v10.922667c0 5.461333 0 13.653333 2.730667 19.114666l-8.192 5.461334z m8.192-40.96h-8.192c0-10.922667 2.730667-21.845333 5.461333-32.768l8.192 2.730666c-2.730667 10.922667-2.730667 19.114667-5.461333 30.037334z m8.192-38.229334l-8.192-2.730666c2.730667-10.922667 8.192-19.114667 10.922666-30.037334l8.192 2.730667c-2.730667 10.922667-8.192 19.114667-10.922666 30.037333z m16.384-38.229333l-8.192-2.730667c5.461333-8.192 8.192-19.114667 13.653333-30.037333l8.192 2.730667c-5.461333 10.922667-10.922667 21.845333-13.653333 30.037333z m16.384-35.498667l-8.192-2.730666c5.461333-8.192 10.922667-19.114667 16.384-27.306667l8.192 5.461333c-5.461333 5.461333-10.922667 13.653333-16.384 24.576z m19.114666-35.498666l-8.192-5.461334c5.461333-8.192 10.922667-19.114667 16.384-27.306666l5.461334 5.461333c-2.730667 8.192-8.192 19.114667-13.653334 27.306667z m21.845334-32.768l-5.461334-5.461334c5.461333-8.192 10.922667-16.384 19.114667-27.306666l5.461333 5.461333c-5.461333 8.192-13.653333 16.384-19.114666 27.306667z m24.576-35.498667l-5.461334-5.461333c5.461333-8.192 13.653333-16.384 19.114667-27.306667l5.461333 5.461333c-8.192 10.922667-13.653333 19.114667-19.114666 27.306667z m21.845333-32.768l-5.461333-5.461333c5.461333-8.192 13.653333-16.384 19.114666-24.576l5.461334 5.461333c-5.461333 8.192-10.922667 16.384-19.114667 24.576z m27.306667-30.037333l-5.461334-5.461334c5.461333-8.192 13.653333-16.384 19.114667-24.576l5.461333 5.461334c-8.192 8.192-13.653333 16.384-19.114666 24.576z m24.576-32.768l-5.461334-5.461334c5.461333-8.192 13.653333-16.384 21.845334-24.576l5.461333 5.461334c-8.192 8.192-16.384 16.384-21.845333 24.576z m24.576-30.037334l-5.461334-5.461333 5.461334-5.461333c5.461333-5.461333 10.922667-13.653333 16.384-19.114667l5.461333 5.461333c-5.461333 5.461333-10.922667 10.922667-16.384 19.114667l-5.461333 5.461333z m27.306666-32.768l-5.461333-5.461333c8.192-8.192 13.653333-19.114667 19.114667-27.306667l5.461333 5.461334c-5.461333 10.922667-13.653333 19.114667-19.114667 27.306666zM150.186667 210.261333l-2.730667-8.192c8.192-2.730667 16.384-8.192 27.306667-13.653333l2.730666 8.192c-8.192 2.730667-19.114667 8.192-27.306666 13.653333zM185.685333 191.146667l-2.730666-5.461334c8.192-5.461333 19.114667-10.922667 30.037333-13.653333l2.730667 8.192c-10.922667 2.730667-19.114667 8.192-30.037334 10.922667z m939.349334-5.461334l-5.461334-5.461333c5.461333-10.922667 10.922667-19.114667 16.384-27.306667l8.192 2.730667c-5.461333 10.922667-10.922667 19.114667-19.114666 30.037333z m-901.12-10.922666L218.453333 166.570667c10.922667-2.730667 21.845333-8.192 32.768-10.922667l2.730667 8.192c-10.922667 2.730667-21.845333 5.461333-30.037333 10.922667z m35.498666-16.384l-2.730666-5.461334c10.922667-2.730667 19.114667-8.192 30.037333-10.922666l2.730667 8.192c-8.192 0-19.114667 5.461333-30.037334 8.192zM1146.88 147.456l-8.192-2.730667c2.730667-8.192 8.192-19.114667 8.192-30.037333l8.192 2.730667c-2.730667 10.922667-5.461333 21.845333-8.192 30.037333z m-849.237333-2.730667l-2.730667-8.192c10.922667-2.730667 19.114667-8.192 30.037333-10.922666l2.730667 8.192c-8.192 2.730667-19.114667 8.192-30.037333 10.922666z m38.229333-13.653333l-2.730667-8.192c10.922667-2.730667 21.845333-8.192 30.037334-10.922667l2.730666 8.192c-8.192 2.730667-19.114667 8.192-30.037333 10.922667z m38.229333-13.653333l-2.730666-8.192c10.922667-2.730667 21.845333-5.461333 30.037333-10.922667l5.461333 10.922667-32.768 8.192zM1157.802667 109.226667h-8.192v-8.192c0-8.192 0-13.653333-2.730667-21.845334l8.192-2.730666c2.730667 8.192 2.730667 16.384 2.730667 24.576V109.226667z m-742.741334-2.730667l-2.730666-8.192c10.922667-2.730667 21.845333-5.461333 30.037333-8.192l2.730667 8.192c-10.922667 0-21.845333 2.730667-30.037334 8.192z m38.229334-13.653333l-2.730667-8.192c10.922667-2.730667 21.845333-5.461333 30.037333-8.192l2.730667 8.192c-10.922667 2.730667-19.114667 5.461333-30.037333 8.192zM491.52 81.92l-2.730667-8.192 32.768-8.192 2.730667 8.192L491.52 81.92z m38.229333-8.192l-2.730666-8.192 32.768-8.192 2.730666 8.192-32.768 8.192z m614.4-2.730667c-5.461333-8.192-10.922667-16.384-19.114666-24.576l5.461333-5.461333c8.192 8.192 16.384 16.384 21.845333 27.306667l-8.192 2.730666z m-573.44-8.192l-2.730666-8.192 32.768-8.192V54.613333c-8.192 2.730667-19.114667 5.461333-30.037334 8.192z m38.229334-8.192l-2.730667-8.192 32.768-8.192 2.730667 8.192-32.768 8.192z m40.96-10.922666l-2.730667-8.192c10.922667-2.730667 21.845333-5.461333 32.768-5.461334l2.730667 8.192c-10.922667 2.730667-21.845333 5.461333-32.768 5.461334zM1119.573333 40.96c-8.192-5.461333-19.114667-10.922667-27.306666-13.653333V19.114667c10.922667 5.461333 21.845333 8.192 30.037333 16.384l-2.730667 5.461333z m-428.714666-5.461333l-2.730667-8.192c10.922667 0 21.845333-2.730667 32.768-5.461334l2.730667 8.192c-13.653333 2.730667-24.576 5.461333-32.768 5.461334z m38.229333-5.461334V21.845333c10.922667-2.730667 21.845333-2.730667 32.768-5.461333v8.192c-10.922667 2.730667-21.845333 2.730667-32.768 5.461333z m354.986667-5.461333c-10.922667-2.730667-19.114667-5.461333-30.037334-8.192l2.730667-8.192 32.768 8.192-5.461333 8.192zM770.048 24.576V16.384c10.922667-2.730667 21.845333-2.730667 32.768-5.461333v8.192c-10.922667 0-21.845333 2.730667-32.768 5.461333z m40.96-5.461333V10.922667c10.922667 0 21.845333-2.730667 32.768-2.730667v8.192c-10.922667 0-21.845333 0-32.768 2.730667z m232.106667-5.461334c-10.922667-2.730667-21.845333-2.730667-32.768-5.461333V0c10.922667 0 21.845333 2.730667 32.768 5.461333v8.192z m-193.877334 0V5.461333c10.922667 0 21.845333-2.730667 32.768-2.730666v8.192c-10.922667 0-21.845333 2.730667-32.768 2.730666z m40.96-2.730666V2.730667c10.922667 0 21.845333 0 32.768-2.730667v8.192c-10.922667 0-21.845333 0-32.768 2.730667z m114.688 0c-10.922667 0-21.845333-2.730667-32.768-2.730667V0c10.922667 0 21.845333 0 32.768 2.730667v8.192zM931.157333 8.192V0h32.768v8.192h-32.768z m150.186667 712.704v-8.192c5.461333 0 10.922667-2.730667 16.384-2.730667l2.730667 8.192c-5.461333 0-10.922667 2.730667-19.114667 2.730667z m0 0"
              fill="#D9D9D9" p-id="1562"></path>
            <path
              d="M966.656 106.496H316.757333s-49.152-5.461333-51.882666 51.882667c-2.730667 57.344 0 671.744 0 750.933333 0 65.536 90.112 79.189333 122.88 40.96 43.690667-46.421333 16.384-103.765333 5.461333-106.496-8.192-2.730667 608.938667 0 608.938667 0V180.224c-2.730667 0 5.461333-73.728-35.498667-73.728"
              fill="#FFFFFF" p-id="1563"></path>
            <path
              d="M333.141333 983.04c-24.576 0-46.421333-8.192-62.805333-24.576-13.653333-13.653333-19.114667-30.037333-19.114667-49.152v-122.88c0-204.8-2.730667-584.362667 0-630.784 2.730667-46.421333 32.768-62.805333 60.074667-62.805333h652.629333c10.922667 0 21.845333 5.461333 30.037334 13.653333 21.845333 24.576 16.384 70.997333 16.384 76.458667v674.474666H409.6c2.730667 5.461333 2.730667 8.192 5.461333 13.653334 5.461333 16.384 10.922667 54.613333-21.845333 90.112-13.653333 13.653333-35.498667 21.845333-60.074667 21.845333z m-19.114666-865.621333c-13.653333 0-38.229333 5.461333-38.229334 43.690666-2.730667 46.421333 0 425.984 0 628.053334v122.88c0 13.653333 5.461333 24.576 13.653334 35.498666 10.922667 10.922667 30.037333 19.114667 46.421333 19.114667 19.114667 0 35.498667-5.461333 43.690667-16.384 19.114667-21.845333 21.845333-43.690667 21.845333-57.344 0-16.384-8.192-30.037333-10.922667-32.768l-8.192-2.730667v-8.192c0-2.730667 0-5.461333 13.653334-8.192 16.384-2.730667 57.344-2.730667 150.186666-2.730666h445.098667v-655.36c2.730667-13.653333 2.730667-46.421333-10.922667-60.074667-2.730667-2.730667-8.192-5.461333-13.653333-5.461333H314.026667z m0 0"
              fill="#A9B1B6" p-id="1564"></path>
            <path
              d="M346.794667 229.376h570.709333v120.149333H346.794667V229.376z m0 174.762667h141.994666V436.906667h-141.994666v-32.768z m0 90.112h286.72v32.768H346.794667v-32.768z m0 90.112H518.826667v32.768h-172.032v-32.768z m0 98.304h346.794666v32.768H346.794667V682.666667z m35.498666 144.725333s60.074667 111.957333-51.882666 147.456c0 0-5.461333 0 0 0 240.298667 2.730667 480.597333 2.730667 720.896-2.730667 10.922667-2.730667 21.845333-8.192 30.037333-13.653333 5.461333-2.730667 19.114667-16.384 27.306667-35.498667 8.192-21.845333 10.922667-54.613333-10.922667-79.189333-5.461333-8.192-13.653333-13.653333-24.576-16.384H382.293333"
              fill="#EDEEEE" p-id="1565"></path>
            <path
              d="M617.130667 983.04c-95.573333 0-188.416 2.730667-283.989334 0l-16.384-2.730667 2.730667-13.653333v-2.730667h8.192c27.306667-8.192 46.421333-24.576 54.613333-43.690666 16.384-40.96-13.653333-84.650667-13.653333-84.650667l-5.461333-10.922667 712.704-5.461333h2.730666c10.922667 5.461333 19.114667 10.922667 27.306667 19.114667 21.845333 24.576 21.845333 62.805333 10.922667 87.381333-5.461333 16.384-16.384 27.306667-30.037334 38.229333-10.922667 8.192-21.845333 13.653333-32.768 16.384h-2.730666c-144.725333 2.730667-289.450667 2.730667-434.176 2.730667z m-251.221334-16.384c226.645333 2.730667 456.021333 0 682.666667-2.730667 8.192-2.730667 19.114667-8.192 27.306667-13.653333 10.922667-8.192 19.114667-19.114667 24.576-32.768 8.192-21.845333 8.192-51.882667-8.192-70.997333-5.461333-5.461333-10.922667-10.922667-19.114667-13.653334h-682.666667c8.192 19.114667 21.845333 57.344 8.192 92.842667-5.461333 16.384-16.384 30.037333-32.768 40.96z m0 0"
              fill="#A9B1B6" p-id="1566"></path>
            <path
              d="M1127.765333 688.128c-8.192-8.192-24.576-16.384-43.690666-16.384 0 0 21.845333 0 40.96-13.653333 10.922667-8.192 19.114667-24.576 19.114666-43.690667 0 0 0 27.306667 19.114667 46.421333 8.192 8.192 21.845333 13.653333 40.96 13.653334 0 0-21.845333 0-38.229333 13.653333-10.922667 8.192-19.114667 24.576-19.114667 43.690667-2.730667 0 0-24.576-19.114667-43.690667M54.613333 286.72c-10.922667-10.922667-30.037333-19.114667-54.613333-19.114667 0 0 30.037333 0 51.882667-19.114666 13.653333-10.922667 21.845333-30.037333 21.845333-57.344 0 0 0 35.498667 24.576 57.344 10.922667 10.922667 30.037333 19.114667 51.882667 19.114666 0 0-27.306667 0-49.152 19.114667-13.653333 10.922667-24.576 30.037333-24.576 57.344-2.730667-2.730667 0-35.498667-21.845334-57.344M1105.92 434.176c-5.461333-5.461333-10.922667-8.192-21.845333-8.192 0 0 10.922667 0 19.114666-8.192 5.461333-5.461333 10.922667-13.653333 10.922667-24.576 0 0 0 16.384 10.922667 24.576 5.461333 5.461333 10.922667 8.192 19.114666 8.192 0 0-10.922667 0-19.114666 8.192-5.461333 5.461333-10.922667 13.653333-10.922667 24.576 0 0 2.730667-13.653333-8.192-24.576"
              fill="#E79F9F" p-id="1567"></path>
            <path
              d="M1193.301333 595.285333c-5.461333-5.461333-13.653333-8.192-24.576-8.192 0 0 13.653333 0 24.576-8.192 5.461333-5.461333 10.922667-13.653333 10.922667-27.306666 0 0 0 16.384 10.922667 27.306666 5.461333 5.461333 13.653333 8.192 24.576 8.192 0 0-13.653333 0-24.576 8.192-5.461333 5.461333-10.922667 13.653333-10.922667 27.306667 0-2.730667 0-19.114667-10.922667-27.306667M917.504 778.24c-2.730667-2.730667-8.192-5.461333-13.653333-5.461333 0 0 8.192 0 13.653333-5.461334 2.730667-2.730667 5.461333-8.192 5.461333-16.384 0 0 0 10.922667 5.461334 16.384 2.730667 2.730667 8.192 5.461333 13.653333 5.461334 0 0-8.192 0-13.653333 5.461333-2.730667 2.730667-5.461333 8.192-5.461334 16.384 0-2.730667 2.730667-10.922667-5.461333-16.384"
              fill="#DC8484" p-id="1568"></path>
            <path
              d="M1067.690667 518.826667c0 65.536-38.229333 122.88-92.842667 147.456-21.845333 10.922667-155.648 60.074667-180.224 60.074666-27.306667 0 57.344-51.882667 35.498667-62.805333-54.613333-27.306667-90.112-84.650667-90.112-144.725333 0-90.112 73.728-163.84 163.84-163.84s163.84 73.728 163.84 163.84"
              fill="#F8E7E7" p-id="1569"></path>
            <path
              d="M794.624 740.010667c-10.922667 0-16.384-5.461333-16.384-8.192-5.461333-10.922667 5.461333-19.114667 21.845333-35.498667 5.461333-5.461333 16.384-16.384 19.114667-21.845333-57.344-30.037333-90.112-90.112-90.112-152.917334 0-98.304 79.189333-174.762667 177.493333-174.762666s174.762667 79.189333 174.762667 174.762666c0 68.266667-38.229333 131.072-101.034667 158.378667-19.114667 8.192-158.378667 60.074667-185.685333 60.074667z m109.226667-371.370667c-84.650667 0-152.917333 68.266667-152.917334 152.917333 0 57.344 32.768 109.226667 81.92 136.533334 5.461333 2.730667 8.192 8.192 10.922667 13.653333 2.730667 13.653333-10.922667 27.306667-27.306667 43.690667 43.690667-10.922667 131.072-43.690667 152.917334-54.613334 51.882667-24.576 87.381333-79.189333 87.381333-136.533333-2.730667-87.381333-68.266667-155.648-152.917333-155.648z m0 0"
              fill="#E79F9F" p-id="1570"></path>
            <path
              d="M846.506667 518.826667c0 10.922667-8.192 16.384-16.384 16.384-10.922667 0-16.384-8.192-16.384-16.384 0-10.922667 8.192-16.384 16.384-16.384s16.384 8.192 16.384 16.384"
              fill="#FCEAEA" p-id="1571"></path>
            <path
              d="M830.122667 546.133333c-10.922667 0-19.114667-5.461333-24.576-16.384-2.730667-10.922667-2.730667-21.845333 5.461333-27.306666 8.192-8.192 19.114667-10.922667 27.306667-5.461334 10.922667 2.730667 16.384 13.653333 16.384 24.576s-10.922667 24.576-24.576 24.576z m0-35.498666c-5.461333 0-8.192 5.461333-8.192 10.922666s2.730667 8.192 8.192 10.922667c5.461333 0 8.192-5.461333 8.192-10.922667 0-8.192-2.730667-10.922667-8.192-10.922666z m0 0"
              fill="#E79F9F" p-id="1572"></path>
            <path
              d="M917.504 518.826667c0 10.922667-8.192 16.384-16.384 16.384-10.922667 0-16.384-8.192-16.384-16.384 0-10.922667 8.192-16.384 16.384-16.384s16.384 8.192 16.384 16.384"
              fill="#FCEAEA" p-id="1573"></path>
            <path
              d="M898.389333 546.133333c-10.922667 0-19.114667-5.461333-24.576-16.384-2.730667-10.922667-2.730667-21.845333 5.461334-27.306666 8.192-8.192 19.114667-10.922667 27.306666-5.461334 10.922667 2.730667 16.384 13.653333 16.384 24.576 2.730667 10.922667-8.192 24.576-24.576 24.576z m0-35.498666c-2.730667 0-5.461333 2.730667-8.192 5.461333-2.730667 2.730667-2.730667 5.461333 0 10.922667 2.730667 2.730667 5.461333 5.461333 8.192 5.461333 5.461333 0 10.922667-5.461333 10.922667-10.922667 0-8.192-5.461333-10.922667-10.922667-10.922666z m0 0"
              fill="#E79F9F" p-id="1574"></path>
            <path
              d="M991.232 518.826667c0 5.461333-2.730667 10.922667-8.192 16.384-5.461333 2.730667-10.922667 2.730667-16.384 0-8.192-2.730667-10.922667-8.192-10.922667-16.384 0-10.922667 8.192-16.384 16.384-16.384s19.114667 8.192 19.114667 16.384"
              fill="#FCEAEA" p-id="1575"></path>
            <path
              d="M972.117333 546.133333c-10.922667 0-19.114667-5.461333-24.576-16.384-2.730667-10.922667-2.730667-21.845333 5.461334-27.306666 8.192-8.192 19.114667-10.922667 27.306666-5.461334 10.922667 2.730667 16.384 13.653333 16.384 24.576 2.730667 10.922667-10.922667 24.576-24.576 24.576z m0-35.498666c-2.730667 0-5.461333 2.730667-8.192 5.461333-2.730667 2.730667-2.730667 5.461333 0 10.922667 2.730667 2.730667 5.461333 5.461333 8.192 5.461333 5.461333 0 10.922667-5.461333 10.922667-10.922667 0-8.192-5.461333-10.922667-10.922667-10.922666z m0 0"
              fill="#E79F9F" p-id="1576"></path>
          </svg>
        </div>
        <span class="color-grey font-s-14">
          暂无小计
          </span>
      </div>
    </div>
    <el-drawer
      size="45%"
      direction="rtl"
      :modal="false"
      :visible.sync="infoDrawer"
      style="padding: 20px"
      :with-header="false">
      <div style="margin: 40px">
        <div class="text-right text-underline hover-cl font-s-13 color-grey-2 mb-20">
          <nuxt-link :to="`/time_notes/details/`+$base64.encode(moodNotes.id)" target="_blank">
            新标签页打开
          </nuxt-link>
        </div>
        <div class="mood-notes-title">
          <p>{{ moodNotes.title }}</p>
          <div class="flex-space-between mt-10">
            <div class="font-s-14 color-grey-2">
              <svg t="1750064730469" class="icon-theme-1 icon-size-16 svg-translateY-3" viewBox="0 0 1024 1024"
                   version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="4314">
                <path
                  d="M510.548 105.582c-129.797 0-235.386 105.593-235.386 235.39 0 93.999 55.509 175.067 135.354 212.767-147.613 43.35-255.793 179.825-255.793 341.273 0 10.275 8.327 18.594 18.594 18.594 10.267 0 18.594-8.319 18.594-18.594 0-175.702 142.956-318.65 318.636-318.65 129.797 0 235.395-105.593 235.395-235.39s-105.598-235.39-235.395-235.39z m0 433.591c-109.294 0-198.197-88.917-198.197-198.202 0-109.29 88.903-198.202 198.197-198.202 109.298 0 198.206 88.912 198.206 198.202 0 109.29-88.903 198.202-198.206 198.202z m0 0z m215.838 72.907c-8.175-6.229-19.83-4.686-26.057 3.487-6.245 8.17-4.686 19.826 3.484 26.074 79.681 60.886 125.367 153.241 125.367 253.366 0 10.279 8.332 18.598 18.595 18.598 10.275 0 18.594-8.319 18.594-18.598 0-111.818-51.024-214.941-139.984-282.927z m0 0z"
                  fill="" p-id="4315"></path>
              </svg>
              <nuxt-link class="mr-10 hover-cl" :to="'/user_home/article?uuid='+$base64.encode(moodNotes.uid)"
                         target="_blank"
                         title="作者">
                {{ moodNotes.createBy }}
              </nuxt-link>
              <span title="记录时间">{{ moodNotes.recordTime }}</span>
            </div>
            <div v-if="moodNotes.isAuthor==0" @click="update">
              <svg t="1742972825057" class="icon-theme-2 icon-hover cursor-pointer icon-size-18 svg-translateY-3"
                   viewBox="0 0 1024 1024"
                   version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="46397">
                <path
                  d="M526.41 117.029v58.514a7.314 7.314 0 0 1-7.315 7.314H219.429a36.571 36.571 0 0 0-35.987 29.989l-0.585 6.583V804.57a36.571 36.571 0 0 0 29.989 35.987l6.583 0.585H804.57a36.571 36.571 0 0 0 35.987-29.989l0.585-6.583v-317.44a7.314 7.314 0 0 1 7.314-7.314h58.514a7.314 7.314 0 0 1 7.315 7.314v317.44a109.714 109.714 0 0 1-99.182 109.203l-10.533 0.512H219.43a109.714 109.714 0 0 1-109.203-99.182l-0.512-10.533V219.43a109.714 109.714 0 0 1 99.182-109.203l10.533-0.512h299.666a7.314 7.314 0 0 1 7.314 7.315z m307.345 31.817l41.4 41.399a7.314 7.314 0 0 1 0 10.313L419.985 655.726a7.314 7.314 0 0 1-10.313 0l-41.399-41.4a7.314 7.314 0 0 1 0-10.312l455.168-455.168a7.314 7.314 0 0 1 10.313 0z"
                  p-id="46398"></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="padding-10">
          <vditor-preview v-if="infoDrawer && moodNotes.content!=null" :id="'moodNotes-content-'+moodNotes.id"
                          :content="moodNotes.content"></vditor-preview>
        </div>
      </div>
    </el-drawer>
    <time-notes-editing :time-notes-dialog-visible="timeNotesDialogVisible"
                        :time-notes="moodNotes"
                        @timeNotesDialogVisibleMethod="timeNotesDialogVisibleMethod"
                        @success="updateList"></time-notes-editing>
  </div>
</template>

<script>
import VditorPreview from "../vditorComponents/Vditor-preview.vue";
import TimeNotesEditing from "./time-notes-editing.vue";
import {createAnimator, triggerNestedAnimation} from '~/plugins/animationUtils'

export default {
  name: "timeNotesList",
  components: {TimeNotesEditing, VditorPreview},
  props: {
    //请求参数
    queryParams: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 100,
        title: null
      })
    },
    //重新加载触发（父级页面累加即可）
    reload: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      total: 0,
      scrollLoading: true,
      loading: true,
      moodNotesList: [],
      moodNotes: {},
      infoDrawer: false,
      timeNotesDialogVisible: false,
      animator: null, // 动画器实例
    }
  },
  watch: {
    reload() {
      this.updateList();
    },
  },
  methods: {
    updateList() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 100;
      this.getList();
    },
    update() {
      this.timeNotesDialogVisible = true;
    },
    timeNotesDialogVisibleMethod(val) {
      this.timeNotesDialogVisible = val
    },
    getList() {
      this.loading = true;
      this.infoDrawer = false;
      this.$API("/white/time/notes/list", "post", null, this.queryParams).then(res => {
        this.moodNotesList = res.rows;
        this.total = res.total;
      }).finally(() => {
        this.loading = false;
        // 等待DOM更新后触发嵌套项目的动画
        this.$nextTick(() => {
          triggerNestedAnimation(this, this.moodNotesList, 'timeNotesItem{groupIndex}_{subIndex}');
        });
      })
    },
    getData() {
      let scrollTop = document.documentElement.scrollTop
      let clientHeight = document.documentElement.clientHeight
      let scrollHeight = document.documentElement.scrollHeight
      if (scrollHeight - (scrollTop + clientHeight) <= 1) {
        if (!this.scrollLoading) return;
        if (this.total > (this.queryParams.pageNum) * this.queryParams.pageSize) {
          this.scrollLoading = false;
          this.queryParams.pageNum = this.queryParams.pageNum + 1;
          this.$API("/white/time/notes/list", "post", null, this.queryParams).then(res => {
            // 记录更新前的状态，用于计算新增的项目
            const originalData = JSON.parse(JSON.stringify(this.moodNotesList));

            res.rows.forEach(outerItem => {
              let recordTime = outerItem.recordTime;
              let existingItem = this.moodNotesList.find(innerItem => innerItem.recordTime === recordTime);
              if (existingItem != null) {
                existingItem.list.push(...outerItem.list);
              } else {
                this.moodNotesList.push(outerItem)
              }
            })
            this.total = res.total;

            // 触发新增项目的动画
            this.$nextTick(() => {
              this.triggerIncrementalAnimation(originalData, res.rows);
            });
          }).finally(() => this.scrollLoading = true)
        }
      }
    },
    getInfo(id) {
      this.$API("/white/time/notes/getInfo/" + id, "get").then(res => {
        this.moodNotes = res.data;
        this.infoDrawer = true;
      })
    },

    // 触发增量动画 - 针对触底加载的新数据
    triggerIncrementalAnimation(originalData, newDataRows) {
      const newElements = [];
      // 遍历当前的所有数据，找出新增的项目
      for (let groupIndex = 0; groupIndex < this.moodNotesList.length; groupIndex++) {
        const currentGroup = this.moodNotesList[groupIndex];
        const originalGroup = originalData.find(og => og.recordTime === currentGroup.recordTime);

        if (!originalGroup) {
          // 这是一个全新的时间组，所有子项都需要动画
          for (let subIndex = 0; subIndex < currentGroup.list.length; subIndex++) {
            const refKey = `timeNotesItem${groupIndex}_${subIndex}`;
            const element = this.$refs[refKey]?.[0];
            if (element) {
              newElements.push(element);
            }
          }
        } else {
          // 现有时间组，只对新增的子项添加动画
          const originalLength = originalGroup.list.length;
          for (let subIndex = originalLength; subIndex < currentGroup.list.length; subIndex++) {
            const refKey = `timeNotesItem${groupIndex}_${subIndex}`;
            const element = this.$refs[refKey]?.[0];
            if (element) {
              newElements.push(element);
            }
          }
        }
      }

      if (newElements.length === 0) return;

      // 初始化新元素为隐藏状态
      newElements.forEach(element => {
        element.style.opacity = '0';
        element.style.transform = 'translateY(30px)';
        element.style.transition = 'none';
      });

      // 逐个显示动画
      let currentIndex = 0;
      const animate = () => {
        if (currentIndex < newElements.length) {
          const element = newElements[currentIndex];
          requestAnimationFrame(() => {
            element.style.transition = 'opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // 缩短动画时长
            element.style.opacity = '1';
            element.style.transform = 'translateY(0)';
          });
          currentIndex++;
          setTimeout(() => animate(), 50); // 进一步减少间隔：80ms → 50ms
        }
      };

      // 减少延迟：100ms → 60ms
      setTimeout(() => animate(), 60);
    }
  },
  mounted() {
    // 初始化动画器
    this.animator = createAnimator(this, 'commonList')
    this.getList();
    window.addEventListener('scroll', this.getData, true);
  },
  destroyed() {
    //离开页面时删除该监听
    window.removeEventListener('scroll', this.getData, true)
  },
}
</script>

<style>
.mood-notes-title {
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid #bdc3c7;
}

.time-motes-list-item {
  margin: 10px 0px;
  width: auto;
  padding: 5px;
  border-radius: 4px;
  transition: .2s;
}

.time-motes-list-item:hover {
  background-color: #F3F3F3;
}

.time-notes-item-title {
  border-bottom: 1px solid #dfe4ea;
  padding-bottom: 4px;
  display: inline-block;
}

.mood-title {
  background-color: #F3F3F3;
  padding: 15px;
  margin-bottom: 30px;
  border-radius: 4px;
  font-style: italic;
}

.el-drawer {
  border-radius: 20px;
}
</style>
